layui的upload实现文件上传详解 | 您所在的位置:网站首页 › layui 上传文件 必填验证 › layui的upload实现文件上传详解 |
前端代码
上传图片
JS代码
layui.config({
base: '/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'upload'], function(){
var $ = layui.jquery
,form = layui.form
,layer = layui.layer
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '/admin/goods/upload' //改成您自己的上传接口
// ,auto:false // 不自动上传
// ,bindAction: '#LAY-user-back-submit' // 绑定上传按钮
,accept: 'images' // 只允许上传图片
,acceptMime: 'image/*' // 打开文件选择器时只显示图片
,choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//如果上传失败
if(res.code
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('上传失败 重试');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
});
后端代码
文件上传相关操作,这里只是用来说明单文件上传用MultipartFile file,参数名为file,layui文件上传文件的参数名为file @RequestMapping("/admin/goods") @Controller @Slf4j public class GoodsController { @Autowired GoodsService goodsService; /** * 文件上传 * @param file * @param request * @return */ @ResponseBody @RequestMapping("/upload") public Object upload(MultipartFile file, HttpServletRequest request){ String fileName = file.getOriginalFilename(); log.info("图片名称:{}",fileName); // 文件上传相关操作,这里只是用来说明单文件上传用MultipartFile file来接收 return ResponseDataUtil.ok(); }若要修改后台参数名,可以使用@RequestParam("file") /** * 文件上传 * @param image * @param request * @return */ @ResponseBody @RequestMapping("/upload") public Object upload(@RequestParam("file") MultipartFile image, HttpServletRequest request){ String fileName = image.getOriginalFilename(); log.info("图片名称:{}",fileName); return ResponseDataUtil.ok(); }自己写的图片上传后端代码 /** * 图片上传 * @param image * @param request * @return */ @ResponseBody @RequestMapping("/upload") public Object upload(@RequestParam("file") MultipartFile image, HttpServletRequest request) { // 获取当前登录的管理员信息 MallAdmin admin = (MallAdmin) request.getSession().getAttribute(AdminStatuUtil.SESSION_LOGIN_ADMIN_PARAM); // 获取时间戳 SimpleDateFormat format = new SimpleDateFormat("yyMMddHHmmss"); String dateTime = format.format(new Date()).toString(); // 获取文件名 String filename = image.getOriginalFilename(); // 生成新的文件名 String newImageName = admin.getUsername()+dateTime+filename; // 文件存储路径 String path = FileUtil.PATH + newImageName; try { // 创建新文件 File file = new File(path); // 图片传输至新文件 image.transferTo(file); HashMap map = new HashMap(); // 返回图片路径 map.put("path",path); return ResponseDataUtil.ok(map); } catch (IOException e) { e.printStackTrace(); } return ResponseDataUtil.fail("上传失败"); } |
CopyRight 2018-2019 实验室设备网 版权所有 |